import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import { Button, Alert } from 'antd'
import steps from './steps'

const Guide = () => {
	const driver = new Driver({
		animate: true, // 在更改突出显示的元素时是否设置动画，
		opacity: 0.75, // 背景不透明度（0表示只有弹出窗口，没有覆盖）
		doneBtnText: '结束', // 最后一个按钮上的文本
		closeBtnText: '关闭', // 此步骤的“关闭”按钮上的文本
		nextBtnText: '下一步', // 此步骤的下一步按钮文本
		prevBtnText: '上一步', // 此步骤的上一个按钮文本
	})

	const guide = () => {
		driver.defineSteps(steps)
		driver.start()
		console.log(driver, 'driver')
	}
	return (
		<div className="card content-box">
			<Alert
				message="引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于 driver.js."
				style={{ width: '100%' }}
				type="warning"
			/>
			<div style={{ margin: '15px auto' }}>
				<Button type="primary" id="antd-button" onClick={guide}>
					打开引导页 🤹‍♂️
				</Button>
			</div>
		</div>
	)
}

export default Guide
